<template>
  <a-card :style="{ boxShadow: 'none' }" :bordered="false" :bodyStyle="{ padding: '0' }">
    <a-table
      @change="pageChange"
      table-layout="fixed"
      sticky
      :row-selection="{
        selectedRowKeys: roleTable.keys,
        onChange: (k: any[]) => (roleTable.keys = k),
      }"
      bordered
      :loading="roleTable.loading"
      :pagination="false"
      :customRow="customRow"
      :rowKey="roleTable.rowKey"
      :columns="formatColumns(roleColumns)"
      :data-source="roleTable.data"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'operation'">
          <a-dropdown-button
            trigger="click"
            @click="selectRole(record.roleId)"
            @open-change="openChange(record as SystemRole)"
          >
            <EditOutlined />
            <template #overlay>
              <a-menu>
                <div v-perm="'system:notice:remove'">
                  <a-menu-item @click="allocateUsers">
                    分配人员
                    <template #icon>
                      <UserAddOutlined />
                    </template>
                  </a-menu-item>
                  <a-menu-item @click="unassignUsers">
                    取消分配
                    <template #icon>
                      <UserDeleteOutlined />
                    </template>
                  </a-menu-item>
                  <a-menu-item @click="allocatingResource">
                    <template #icon>
                      <ClusterOutlined />
                    </template>
                    分配资源
                  </a-menu-item>
                  <a-menu-item @click="roleDelete(record.roleId)">
                    <template #icon>
                      <DeleteOutlined />
                    </template>
                    删除角色
                  </a-menu-item>
                </div>
              </a-menu>
            </template>
          </a-dropdown-button>
        </template>
      </template>
    </a-table>
  </a-card>
</template>

<script setup lang="ts">
import type { SystemRole } from '@/api/modules/system/role/types';
import { formatColumns } from '@/utils/table/table';
import { useArrayFilter } from '@vueuse/core';
import type { TablePaginationConfig } from 'ant-design-vue';
import type { FilterValue, SorterResult } from 'ant-design-vue/es/table/interface';
import { roleColumns } from '../../data/column';
import { allocatingResource, roleDelete, selectRole } from '../../data/curd';
import { roleForm } from '../../data/form';
import { roleTable } from '../../data/table';
import { allocateUsers, unassignUsers } from '../assign/data';

const openChange = (record: SystemRole) => {
  roleForm.value = record;
};

/* 行事件 */
const customRow = (record: SystemRole) => {
  return {
    onClick() {
      const id = (record as any)[roleTable.value.rowKey];
      roleForm.value = record;
      if (!roleTable.value.keys.includes(id)) {
        roleTable.value.keys.push(id);
      } else {
        roleTable.value.keys = useArrayFilter(roleTable.value.keys, e => e !== id).value;
      }
      if (record.roleId) {
        roleTable.value.keys = [record.roleId];
      }
    },
    onDblclick() {
      selectRole(record.roleId);
    },
  };
};

/* 分页事件触发 */
const pageChange = (
  pagination: TablePaginationConfig,
  filters: Record<string, FilterValue>,
  sorter: SorterResult<SystemRole> | SorterResult<SystemRole>[],
) => {
  roleTable.value.query.pageNum = pagination.current!;
  roleTable.value.query.pageSize = pagination.pageSize!;
};
</script>

<style lang="scss" scoped></style>
